<!DOCTYPE html>
<html>
  <head>
    <title>bdmap.html</title>
	
   <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
     <script src="static/js/jquery-1.11.2.min.js"></script>
     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=slQh6wYeGi2K2Lnrk7pfZHyVUfdjVdtD"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
      <style>
/* .BMap_pop {
 display:none;
 }  */
  .BMap_bubble_title p a{display:none}
.BMap_shadow {
display:none;}
.BMapLabel{
background-color: #5085F9;
margin-left:20px;
/* color:white; */
 }
   .anchorBL{
  display:none;
  }
  .anchorBL span{
  display:none;
  }
 </style>
  <body style="margin:0px;">
    <div id="allmap" style="height:100%;width:100%;position:absolute;"></div>
   		 <div style="margin-bottom:1%;bottom:1%;width:100%;position:absolute;"><img id="jt" style="position:relative;color:blue;margin-left:5%;background: #F6F7F9;border-style:solid;border-width:1px;border-color:#F3F3F3;line-height:0px;background-color: '';font-size:0.3rem;" onclick="jiaotong()" src="static/images/jiaotong.png"/><img id="jy" onclick="jiaoyu()" style="position:relative;color:blue;margin-left:18%;background: #F6F7F9;border-style:solid;border-width:1px;border-color:#F3F3F3;line-height:0px;background-color: '';font-size:0.3rem;" src="static/images/canyin.png"/><img id="yl" onclick="yiliao()" style="position:relative;color:blue;margin-left:18%;background: #F6F7F9;border-style:solid;border-width:1px;border-color:#F3F3F3;line-height:0px;background-color: '';font-size:0.3rem;" src="static/images/yinhang.png"/><img id="gw" style="position:relative;color:blue;margin-left:18%;background: #F6F7F9;border-style:solid;border-width:1px;border-color:#F3F3F3;line-height:0px;background-color: '';font-size:0.3rem;" onclick="gouwu()" src="static/images/jiudian.png"/></div>
                 
                 <div id="jiaotongdiv">
                 	<table>
                 		<tr style="height: 10px;display:none;" id="results"><button id="dtz" type="button" onclick="dtz()" style="color:black;background: #F6F7F9;line-height:0px;;color:blue;background-color: '';width:40%;font-size:0.4rem;display:none;" ><img src="images/dt.png" style="margin-left:-10px;">地铁站</button></tr>
                 		<tr style="height: 10px;display:none;" id="results"><button id="gjz" type="button" onclick="gjz()" style="color:black;background: #F6F7F9;line-height:0px;margin-left:10px;background-color: '';width:40%;font-size:0.4rem;display:none;"><img src="images/gj.png" style="margin-left:-10px;">公交站</button></tr>
                 	</table>
                 	<div id="cont" style="height:8.5rem;width:40%;position:absolute;overflow-y :auto;margin-top:-20px;display:none;"></div>
                 </div>
                 <div id="jiaoyudiv" style="display:none;">
                 	<div id="cont1" style="height:11rem;width:40%;position:absolute;overflow-y :auto;"></div>
                 </div>
                 <div id="yiliaodiv" style="display:none;">
                 	<div id="cont2" style="height:11rem;width:40%;position:absolute;overflow-y :auto"></div>
                 </div>
                 <div id="gouwudiv" style="display:none;">
                 	<div id="cont3" style="display:none;height:11rem;width:40%;position:absolute;overflow-y :auto"></div>
                 </div> 
                 <div id="shenghuodiv" style="display:none;">
                 	<div id="cont4" style="height:200px;width:300px;position:absolute;overflow-y :auto"></div>
                 </div>
                 <div id="yulediv" style="display:none;">
                 	<div id="cont5" style="height:200px;width:300px;position:absolute;overflow-y :auto"></div>
                 </div>
  </body>
  <script>
  var htmlUrl = document.location.host;
var port = document.location.port;
var url=document.URL;
var  para = "";
var commname="";
if(htmlUrl == "")
{       
        htmlUrl = "http://localhost:"+port;
}
else
{
        htmlUrl = "http://" + htmlUrl;
}
if(url.lastIndexOf("?")>0){        
para=url.substring(url.lastIndexOf("?")+1,url.length);	
var arr=para.split("&");
if(arr.length==1){
	commname = decodeURI(arr[0].split("=")[1].replace("#",""));
 } 
}
  	var cr= "";
var resu;
var marker1="";
var map = new BMap.Map("allmap",{enableMapClick:false});    // 创建Map实例
// 左上角，添加比例尺
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});
//左上角，添加默认缩放平移控件
var top_left_navigation = new BMap.NavigationControl();  
map.addControl(top_left_navigation);
//添加滚轮放大、缩小
map.enableScrollWheelZoom(true);
cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_RIGHT});   //设置版权控件位置
map.addControl(cr); //添加版权控件
//创建地址解析器实例
var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上,并调整地图视野
//commname = "华贸中心";
myGeo.getPoint(commname, function(point){
		if (point) {
			map.centerAndZoom(point, 16);
			btn("cont","地铁");
			btn("cont","公交");
			var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {  
                offset: new BMap.Size(10, 25), // 指定定位位置  
                imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移  
            });   
		 	var marker = new BMap.Marker(point,{icon:myIcon});
			marker.setLabel(new BMap.Label(commname));
			map.addOverlay(marker);	
		}else{
			alert("您选择地址没有解析到结果!");
		}
	}, "北京市");
  </script>
  <script type="text/javascript">
  function btn(id,name){

	 myGeo.getPoint(commname, function(point){
		if (point) {
			map.clearOverlays();
			map.centerAndZoom(point, 16); 
			 var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {  
                offset: new BMap.Size(10, 25), // 指定定位位置  
                imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移  
            });   
		 	var marker = new BMap.Marker(point,{icon:myIcon});
			marker.setLabel(new BMap.Label(commname));
			map.addOverlay(marker);
			var circle = new BMap.Circle(point,500,{fillColor:"#ccc", strokeWeight: 1 ,fillOpacity: 0.2, strokeOpacity: 0.2});
			// 范围区域
			map.addOverlay(circle); 
			var myIcon1 = new BMap.Icon("images/marker1.png", new BMap.Size(14,23));
		    var local =  new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false},pageCapacity: 20});
		    local.setMarkersSetCallback(function(result){
				 for(var i=0;i<result.length;i++){
					 result[i].marker.setIcon(myIcon1,result[i].title);
				 }			 
			})	
		    local.setSearchCompleteCallback(function (result){
		    	var s = [];
			    var html = "<ul style=''>"
						 for (var i = 0; i < result.getCurrentNumPois(); i ++){
							var endpoint=new BMap.Point(result.getPoi(i).point.lng,result.getPoi(i).point.lat); 
							var distance=map.getDistance(point,endpoint).toFixed(0);
							s.push(result.getPoi(i).title + ", " +distance+"米"); 
						 	//html+="<div class='linkli'><li  style='list-style: none;margin:10px;cursor:pointer;font-size:15px;'><a style='text-decoration:none;'  href='javascript:void(0)' onclick=aClick("+result.getPoi(i).point.lat+","+result.getPoi(i).point.lng+",'"+result.getPoi(i).title+"')>"+result.getPoi(i).title+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src='images/juli.png'/>&nbsp;&nbsp;"+distance+"米</a></li><li  style='list-style: none;color:#A9A9A9;margin:10px;font-size:14px;'>"+result.getPoi(i).address+"</li></div>";
							
						 } 
						html+="</ul>";
						//document.getElementById(id).innerHTML = html;  
				
		     });  
		    local.searchNearby(name,point,500);
		}else{
			alert("您选择地址没有解析到结果!");
		}
	}, "北京市"); 
}
 function aClick(lng,lat,title){
	map.removeOverlay(marker1);   
	var point=new BMap.Point(lat,lng); 
	var myIcon2 = new BMap.Icon("images/make.png", new BMap.Size(23, 25));  
	marker1 = new BMap.Marker(point,{icon:myIcon2});
	//marker1.setLabel(new BMap.Label(title));
	map.addOverlay(marker1);
	map.panTo(point); 
}
//点击结果面板
function clicked(dom){
	
        var collection = $(".linkli");
        $.each(collection, function () {
            $(this).removeClass("end");
            $(this).addClass("start");
            
        });
        $(dom).removeClass("start");
        $(dom).addClass("end");
       
        //map.panTo(point);
}
//地铁站
function dtz(){
	$("#gjz").css({'color':'black'});
	$("#dtz").css({'color':'blue'});
	btn("cont","地铁");
}
//公交站
function gjz(){
	$("#gjz").css({'color':'blue'});
	$("#dtz").css({'color':'black'});
	btn("cont","公交");
}

	
function jiaotong(){
	$("#jy").css({'color':'black'});
	$("#gw").css({'color':'black'});
	$("#sh").css({'color':'black'});
	$("#yul").css({'color':'black'});
	$("#yl").css({'color':'black'});
	$("#jt").css({'color':'blue'});
	$("#gjz").css({'color':'black'});
	$("#dtz").css({'color':'blue'});
	$("#jiaoyudiv").hide();	
	$("#jiaotongdiv").show();
	$("#gouwudiv").hide();
	$("#shenghuodiv").hide();
	$("#yulediv").hide();
	$("#yiliaodiv").hide();
	btn("cont","地铁");
}
function jiaoyu(){
	$("#jt").css({'color':'black'});
	$("#jy").css({'color':'blue'});
	$("#gw").css({'color':'black'});
	$("#jt").css({'color':'black'});
	$("#sh").css({'color':'black'});
	$("#yul").css({'color':'black'});
	$("#yl").css({'color':'black'});
	$("#jiaoyudiv").show();
	$("#jiaotongdiv").hide();
	$("#gouwudiv").hide();
	$("#shenghuodiv").hide();
	$("#yulediv").hide();
	$("#yiliaodiv").hide();
	btn("cont1","餐饮");
}
function yiliao(){
	$("#jt").css({'color':'black'});
	$("#jy").css({'color':'black'});
	$("#gw").css({'color':'black'});
	$("#jt").css({'color':'black'});
	$("#sh").css({'color':'black'});
	$("#yul").css({'color':'black'});
	$("#yl").css({'color':'blue'});
	$("#jiaoyudiv").hide();
	$("#jiaotongdiv").hide();
	$("#gouwudiv").hide();
	$("#shenghuodiv").hide();
	$("#yulediv").hide();
	$("#yiliaodiv").show();
	btn("cont2","银行");
}
function gouwu(){
	$("#jt").css({'color':'black'});
	$("#gw").css({'color':'blue'});
	$("#yl").css({'color':'black'});
	$("#sh").css({'color':'black'});
	$("#yul").css({'color':'black'});
	$("#jy").css({'color':'black'});
	$("#jiaoyudiv").hide();
	$("#jiaotongdiv").hide();
	$("#yiliaodiv").hide();
	$("#gouwudiv").show();
	$("#shenghuodiv").hide();
	$("#yulediv").hide();
	btn("cont3","酒店");
}
function shenghuo(){
	$("#jt").css({'color':'black'});
	$("#jy").css({'color':'black'});
	$("#gw").css({'color':'black'});
	$("#sh").css({'color':'blue'});
	$("#yul").css({'color':'black'});
	$("#yl").css({'color':'black'});
	$("#jiaoyudiv").hide();
	$("#jiaotongdiv").hide();
	$("#gouwudiv").hide();
	$("#yiliaodiv").hide();
	$("#shenghuodiv").show();
	$("#yulediv").hide();
	btn("cont4","酒店");
}
function yule(){
	$("#jt").css({'color':'black'});
	$("#jy").css({'color':'black'});
	$("#gw").css({'color':'black'});
	$("#jt").css({'color':'black'});
	$("#sh").css({'color':'black'});
	$("#yul").css({'color':'blue'});
	$("#yl").css({'color':'black'});
	$("#jiaoyudiv").hide();
	$("#jiaotongdiv").hide();
	$("#gouwudiv").hide();
	$("#yiliaodiv").hide();
	$("#shenghuodiv").hide();
	$("#yulediv").show();
	btn("cont5","娱乐");
} 
  </script>
</html>
